<div *ngIf="HasNoPreferenceOnDevices(devices)" class="sidebar-no-widget-message">
  You have not set any kind of widgets on your sidebar. You can add them here
  by checking out each device single page and configure the customization
</div>
<app-statistics></app-statistics>
<div class="row">
  <ng-container *ngFor="let device of devices">
    <ng-container *ngIf="device.preferences">
      <div class="col-xl-4 col-lg-6 col-md-4 col-sm-6" *ngIf="device.preferences.DisplayRealTimeTemperatureInSidebar && +device.type === 0">
        <div class="box-wrapper">
          <app-daily-statistics [id]="device.id"></app-daily-statistics>
        </div>
      </div>

      <div class="col-xl-4 col-lg-6 col-md-4 col-sm-6" *ngIf="+device.type === 4">
        <div class="box-wrapper">
          <app-kana-beta [id]="device.id"></app-kana-beta>
        </div>
      </div>
      <div class="col-xl-4 col-lg-6 col-md-4 col-sm-6" *ngIf="device.preferences.DisplayLampOnOffInHome && +device.type === 1">
        <div class="box-wrapper">
          <app-lamp-card [id]="device.id"></app-lamp-card>
        </div>
      </div>
      <div class="col-xl-4 col-lg-6 col-md-4 col-sm-6" *ngIf="device.preferences.DisplayHumidityInHome && +device.type === 2">
        <div class="box-wrapper">
          <app-humidity [id]="device.id"></app-humidity>
        </div>
      </div>
      <div class="col-xl-4 col-lg-6 col-md-4 col-sm-6" *ngIf="device.preferences.DisplayCO2InHome && +device.type === 3">
        <div class="box-wrapper">
          <app-co2-widget [id]="device.id"></app-co2-widget>
        </div>
      </div>
      <div class="col-md-8 col-sm-6" *ngIf="device.preferences.DisplayHistoryStatisticsInHome">
        <div class="box-wrapper no-padding">
          <app-history-statistics [device]="device"></app-history-statistics>
        </div>
      </div>
    </ng-container>
  </ng-container>
</div>
<app-places></app-places>
